<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .menu {

            display: flex;
        }

        .menu .item {
            float: left;
            flex: 1;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: black;
            color: burlywood;
        }

        .menu .active {
            color: crimson;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-if="!flag">
            <div class="menu">
                <div class="item" v-for="item in list" :class="{active:activeIndex==item.id}" @click="change(item)">
                    {{item.msg}}</div>
            </div>
            <div>
                <component :is="com" @gotologin="gotoLogin" @setflag="setFlag" @setinfo="setInfo"></component>
            </div>
        </div>
        <detail v-else @setflag ="setFlag" :info="info"></detail>
    </div>

</body>
<template id="login">
    <div>
        <div>用户名 <input v-model="username" /></div>
        <div>密码 <input v-model="userpwd" /></div>
        <button @click="submit">提交</button>
    </div>
</template>
<template id="register">
    <div>
        <div>用户名 <input v-model="username" /></div>
        <div>密码 <input v-model="userpwd" /></div>
        <div>确认密码 <input v-model="userpwd1" /></div>
        <button @click="submit">提交</button>
    </div>
</template>
<template id="detail">
    <div>
        用户信息:{{info.username}} <button @click="exist">退出 返回登录</button>
    </div>
</template>
<script>

    let detail = {
        props:["info"],
        template: "#detail",
        methods:{
            exist(){
                window.localStorage.removeItem("userinfo");
                //页面到登录页面
                this.$emit("setflag",false);

            }
        }

    }
    let login = {
        data() {
            return {
                username: "",
                userpwd: ""
            }
        },
        template: "#login",
        methods: {
            async submit() {//登录的提交事件
                // alert(this.username+"&"+this.userpwd);
                //查询用户名和密码是否匹配
                let { data: list } = await axios({
                    method: "get",
                    url: "http://localhost:2345/userinfos",
                    params: {
                        username: this.username,
                        userpwd: this.userpwd
                    }
                })//判断完成   如果有  用户名是唯一的   也只会有一条数据
                if (list.length) {
                    let info = list[0];//登录成功的用户信息
                    //把用户名信息进行本地存储
                    window.localStorage.setItem("userinfo", JSON.stringify(info));
                    //把对象 转成字符串 存起来
                    //把flag 改成true   但是flag是父组件
                    this.$emit("setflag",true);
                    this.$emit("setinfo",info);

                } else {
                    alert("用户名和密码不匹配");
                }
            }
        }
    }


    let register = {//注册组件的事情
        data() {
            return {
                username: "",
                userpwd: "",
                userpwd1: ""
            }
        },
        template: "#register",
        methods: {
            async submit() {
                // alert(this.username+"&"+this.userpwd);
                // 检查用户名是否存在(查询)
                let { data: list } = await axios({
                    method: "get",
                    url: "http://localhost:2345/userinfos",
                    params: {
                        username: this.username
                    }
                });
                //用户名是唯一的
                if (list.length) {
                    alert("该用户名已经存在");
                    return false;
                }


                //新增  
                await axios({
                    method: "post",
                    url: "http://localhost:2345/userinfos",
                    data: {
                        username: this.username,
                        userpwd: this.userpwd
                    }
                })

                this.$emit("gotologin");//调用自定义事件
            }
        }
    }

    new Vue({
        el: "#app",
        data: {
            activeIndex: 1,
            com: "login",
            flag: false,//表示登录状态
            info:{},//用户信息
            list: [{ id: 1, msg: "登录", com: "login" }, { id: 2, msg: "注册", com: "register" }]
        },
        created(){
            let info  = window.localStorage.getItem("userinfo");//获取用户信息
            if(info){//表示有
                this.flag = true;
                this.info= JSON.parse(info);
            }else{
                this.flag = false;
            }
            
        },
        methods: {
            change(item) {
                this.activeIndex = item.id;
                this.com = item.com;
            },
            gotoLogin() {//调用这个方法就可以去登录页面
                this.activeIndex = 1;
                this.com = "login";
            },
            setFlag(flag){
                this.flag = flag;
            },
            setInfo(info){
                this.info = info;
            }
        },
        components: {
            login,
            register,
            detail
        }
    })

</script>

</html>